import Sprite from '../base/sprite';
import Card, { pics } from '../card/card'
import { SCREEN_WIDTH, SCREEN_HEIGHT } from '../render';
import Emitter from '../libs/tinyemitter';

/**
 * 游戏背景类
 * 提供 update 和 render 函数实现无限滚动的背景功能
 */
export default class Cards extends Emitter {
  cardsArr = []
  cardsJson = {}

  totalImageNumber = 12
  // MaxZIndex = 0


  render(ctx, arr) {
    this.cardsArr = []
    this.cardsJson = {}
    // this.MaxZIndex = 0

    //分组 分配图案
    // const patternList = this.randomPicArr(arr)

    // zIndex 从小到大
    for (let i = 0; i < arr.length; i++) {
      const item = arr[i]
      const { zIndex } = item;
      // zIndex > this.MaxZIndex && (this.MaxZIndex = zIndex);

      const card = new Card(item.left, item.top, item.picIndex);

      // (async () => {
      /* await new Promise((resolve) => {
        card.on('load', () => {
          card.render(ctx, zIndex);
          if (this.isOverlappingArr(item, i, arr)) {
            item.disabled = true
            card.renderOverlay(ctx);
          } else { 
            item.disabled = false
          }


          resolve()
        })
      }) */
      card.render(ctx, i);
      if (this.isOverlappingArr(item, i, arr)) {
        item.disabled = true
        card.renderOverlay(ctx);
      } else {
        item.disabled = false
      }
      // })();
      this.cardsArr.push(card)
      const zIndexArr = this.cardsJson[zIndex] || (this.cardsJson[zIndex] = []);
      zIndexArr.push(card)

      card.on('click', () => {
        this.emit('click', item, i);
      })
    }


  }

  loadAllImagePromise() {
    return pics.map(img => { 
      return new Promise((resolve) => { 
        img.onload = () => {
          console.log('Promise-imgSrc', img.src)
          // this.emit('load');
          resolve()
        }
      })
    })
    // return Array.from(Array(this.totalImageNumber), (e, i) => i + 1).map(item => new Card(0, 0, item).loadImagePromise)
  }
  isOverlappingArr(item, i, arr) {
    // 有待优化 
    for (let j = i + 1; j < arr.length; j++) {
      const nexItem = arr[j];
      const isOverlap = this.isOverlapping(item, nexItem);
      if (isOverlap) {
        return true
      }
    }

  }

  randomPicArr(arr) {
    const totalGroups = Math.floor(arr.length / 3);
    const patternList = []
    for (let i = 0; i < totalGroups; i++) {
      patternList.push(...Array(3).fill(i % 12 + '')) // 12个图标
    }
    // patternList.sort(() => Math.random() - 0.5)
    this.shuffle(patternList)
    console.log(patternList)
    return patternList
  }

  // 洗牌算法
  shuffle(arr) {
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];

    }
    return arr
  }

  isOverlapping(rect1, rect2) {
    // 如果矩形1的右边界大于等于矩形2的左边界，且矩形1的左边界小于等于矩形2的右边界，且矩形1的下边界大于等于矩形2的上边界，且矩形1的上边界小于等于矩形2的下边界，说明两个矩形有重叠部分，发生了碰撞
    if (
      !(rect2.left >= rect1.right ||
        rect2.top >= rect1.bottom ||
        rect2.right <= rect1.left ||
        rect2.bottom <= rect1.top)
    ) {
      return true;
    }
    // 否则，说明两个矩形没有重叠部分，没有发生碰撞
    return false;
  }
  /* render(ctx,arr) {
    let width = GameGlobal.card.width
    const itemGap = GameGlobal.slot.itemGap
    let left = GameGlobal.slot.left + itemGap
    let top = GameGlobal.slot.top + itemGap
    for (let i = 0; i < 7; i++) {
      const item = new Card(left, top, i + 1)
      item.on('load', () => {
        item.render(ctx);
      })
      this.cards.push(item)
      left += width + itemGap
    }
  } */

  update() {
    if (GameGlobal.databus.isGameOver) {
      return;
    }


  }


}
